import { useState, useEffect } from 'react';
import './XiaoXiZhongX.css';
import axios from 'axios';

interface DataItem {
  id: number;
  title: string;
  time: string;
}
// 每页显示的条目数
const ITEMS_PER_PAGE = 3; 

function AllMessages() {
  const [data, setData] = useState<DataItem[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalItems, setTotalItems] = useState(0);

  useEffect(() => {
    // 根据当前页码请求数据
    axios.get('http://localhost:3000/api/data', {
      params: {
        page: currentPage,
        limit: ITEMS_PER_PAGE,
      },
    })
    .then(response => {
      setData(response.data.list);
      // 根据你的 API 响应调整
      setTotalItems(response.data.total); 
    })
    .catch(error => console.error('获取数据出错:', error));
  }, [currentPage]);

  const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
  console.log(totalPages);
  

  const handlePageChange = (newPage: number) => {
    if (newPage > 0 && newPage <= totalPages) {
      setCurrentPage(newPage);
    }
  };

  return (
    <div className='allMessages_content'>
      {data.map(item => (
        <div key={item.id} className="allMessages_content_list">
          <dt> <img src="" alt="" /></dt>
          <dd>{item.title}
          <p>站内通知 |{item.time}</p></dd>
        </div>
      ))}
      <div className="allMessages_content_list">
        <dl>
          <dt><img src="" alt="" /></dt>
          <dd>填写调研问卷,赢京东卡赢免费VIP,立即参与
            <p>活动福利 | 2024-09-11 14:13:09</p>
          </dd>
        </dl>
      </div>
      <div className="pagination">
        <button
          onClick={() => handlePageChange(currentPage - 1)}
          disabled={currentPage === 1}
        >
          上一页
        </button>
        <span>第 {currentPage} 页 / 共 {totalPages} 页</span>
        <button
          onClick={() => handlePageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
        >
          下一页
        </button>
      </div>
    </div>
  );
}

export default AllMessages;


